@include('Home.head')

<style>
	.page-left{
		width: 20%;
		float: left;
		background: #f9f9f9;
		height: 100%;
	}
	.page-left-list{
		width: 100%;
		text-align: center;
		line-height: 50px;
		font-size: 16px;
		font-weight: 400;
		color: #333333;
	}
	.page-left-list-active{
		color: #d2393b;
		border-left: 4px solid #d2393b;
	}
	.page-right{
		width: 80%;
		float: left;
		overflow-y: scroll;
	}
	.page-right-list{
		width: 45%;
		margin: 10px 2.5%;
		float: left;
		border-radius: 10px;
		background: #F9F9F9;
	}
	.right-list-image img{
		width: 100%;
		height: 140px;
		border-radius: 10px 10px 10px 10px;
	}
	.right-list-title{
		width: 100%;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
		font-size: 14px;
		color: #333333;
	}
	.right-list-oldprice{
		color: grey;
		font-size: 13px;
		text-decoration: line-through
	}
	.right-list-price{
		color: #d2393b;
		font-size: 13px;
		margin: 5px 0;
	}
	.right-list-pv{
		color: #d2393b;
		font-size: 13px;
		margin: 5px 0;
	}
	.right-list-buy{
		background: #d2393b;
		color: #ffffff;
		width: 60%;
		height: 25px;
		line-height: 25px;
		border-radius: 15px;
		text-align: center;
	}

</style>

<body>

<div class="container" id="app">
	<header data-am-widget="header" class="am-header am-header-default" style="background-color: white;">
		<div class="am-header-left am-header-nav">
			<a  onclick="javascript:history.back(-1);" class="">
				<i style="font-weight: 500;font-size: 18px;font-style:normal; color: black">返回</i>
			</a>
		</div>
		<h1 class="am-header-title">
			<a href="#title-link" class="" style="font-weight: 600;">@{{title}}</a>
		</h1>
	</header>
	{{--<div style="margin: 10px;">--}}
	{{--<el-input v-model="keyword"  placeholder="请输入搜索关键字">--}}
	{{--<el-button slot="append" icon="am-icon-search" v-on:click="search()"></el-button>--}}
	{{--</el-input>--}}
	{{--</div>--}}
	<!-- banner -->

	<div class="am-cf am-g">
		<div class="page-left">
			<div class="page-left-list" :class="{'page-left-list-active':val===0}"  v-on:click="chooseType(0)">
				全部商品
			</div>
			<div class="page-left-list" :class="{'page-left-list-active':val===item.id}" v-for="item in classify" v-on:click="chooseType(item.id)">
				@{{ item.name }}
			</div>

		</div>
		<div class="page-right">
			<div class="page-right-list" v-for="item in goodsList" v-on:click="jump(item.id)">
				<div class="right-list-image">
					<img :src="item.goods_thumb">
				</div>
				<div class="right-list-title">
					@{{ item.goodsname }}
				</div>

				<div class="right-list-price">
					运营师价：<span style="font-weight: 700;">@{{ item.rulingprice }}</span>
				</div>
				<div class="right-list-oldprice">
					原价：@{{ item.originalprice }}
				</div>
				<div class="right-list-pv">
					PV值：@{{ item.pk_integral }}
				</div>
				<div class="right-list-buy" style="float: right;">
					立即购买
				</div>
			</div>


		</div>

	</div>
	{{--<li class="layui-flow-more" v-if="loading">加载中</li>--}}
	{{--<li class="layui-flow-more" v-if="loading==false">没有更多了</li>--}}

	@include('Home.foot')

</div>

</body>

<script>

	var app = new Vue({

		el:"#app",

		data: {

			img1:'',
			title:'',
			goodsList : [],
			goods:[],
			goods1:[],
			imagelist:[],
            cid:3,
			rotation:[],
			keyword:'',
			classify:{},
			page: '', //总页数
			nowPage: 2, //本页
			loading: false, //异步加载时的限制
			bottomHight: 50, //滚动条到某个位置才触发时间
			val:0
		},

		//事件

		methods: {

			classify1:function () {

				//获取商品数据

				$.post("/home/index/index_classify",{'_token':'{{csrf_token()}}',cid:3},function (res) {

					if(res.code == 1){
						app.classify = res.data;
						console.log(app.classify)
					} else if(res.code == 0) {
						layer.msg(res.data,{icon:7});
					}

				});

			},
			initialize:function () {

				//获取商品数据
				var class1 = this.obtain('class');
				$.post("/home/index/sort_goods ",{'_token':'{{csrf_token()}}',cid:3},function (res) {

					if(res.code == 1){
						console.log(res.data)
						app.goodsList = res.data;
						// if(app.cid == 7){
						// 	app.img1 = 'http://qiniu.baoliy168.com/%E7%BB%84%207%20%E2%80%93%202%403x.png';
						// 	app.title = '平价专区';
						// }else if(app.cid == 54){
						// 	app.img1 = 'http://qiniu.baoliy168.com/%E7%BB%84%E4%BB%B6%207%20%E2%80%93%201%40.png';
						// 	app.title = '爆品专区';
						// }else if(app.cid == 55){
						// 	app.img1 = 'http://qiniu.baoliy168.com/%E7%BB%84%E4%BB%B6%207%20%E2%80%93%201%40.png';
						// 	app.title = '品牌专区';
						// }else if(class1 == 'is_source'){
						// 	app.title = '源头厂家';
						// }
					} else {
						layer.msg(res.data,{icon:7});
						// if(app.cid == 7){
						// 	app.title = '平价专区';
						// }else if(app.cid == 54){
						// 	app.title = '爆品专区';
						// }else if(app.cid == 55){
						// 	app.title = '品牌专区';
						// }else if(class1 == 'is_source'){
						// 	app.title = '源头厂家';
						// }

					}

				});

				{{--$.post("/home/index/resale", {'_token': '{{csrf_token()}}',class:'select',two_tid:0}, function (res) {--}}
				{{--              // console.log(res)--}}
				{{--              if (res.code == 1) {--}}
				{{--				app.goods = res.data;--}}
				{{--              } else {--}}
				{{--                 layer.msg(res.data,{icon:7});--}}
				{{--              }--}}
				{{--          });--}}
				{{--$.post("/home/index/newborn", {'_token': '{{csrf_token()}}',class:'select',two_tid:0}, function (res) {--}}
				{{--              // console.log(res)--}}
				{{--              if (res.code == 1) {--}}
				{{--				app.goods1 = res.data;--}}
				{{--              } else {--}}
				{{--                 layer.msg(res.data,{icon:7});--}}
				{{--              }--}}
				{{--          });--}}

			},

			handleScroll: function () {
				var rico = this
				// console.log(app.type);
				if (getScrollBottomHeight() <= app.bottomHight && app.nowPage < app.page && app.loading ==
						false) {
					app.loading = true;
					$.get("/home/index/classify", {
						'_token': '{{csrf_token()}}',
						class: 'find',
						page: app.nowPage + 1,
						cid:app.cid,
                        two_tid:app.val
					}, function (res) {
						for (var i = 0; i < res.data.data.length; i++) {
							// console.log(res.data.data[i])

							app.goodsList.push(res.data.data[i]);
						}
						app.nowPage++;
						app.loading = false;
					});
				}
			},
			chooseType(id){
				app.val = id;
				app.page = 0;
				this.getGoods();
			},
			getGoods:function(){
				$.post("/home/index/sort_goods ",{'_token':'{{csrf_token()}}',cid:3,two_tid:app.val},function (res) {

					if(res.code == 1){
						console.log(res.data)
						app.goodsList = res.data;

					} else {
						layer.msg(res.data,{icon:7});


					}

				});
			},
			search:function(){
				//获取商品数据
				var id = this.obtain('cid');
				$.post("/home/index/search",{'_token':'{{csrf_token()}}',class:'select',keyword:app.keyword,cid:app.cid},function (res) {

					if(res.code == 1){
						app.goodsList = res.data.data

						if (res.data.length > 3) {
							for (var i = 0; i < 3; i++) {
								var datas = {
									goods_thumb: '',
									gid: 0
								};
								datas.goods_thumb = app.goodsList[i].goods_thumb;
								datas.gid = app.goodsList[0].id;
								app.rotation.push(datas);
							}
						}else{
							for (var i = 0; i < res.data.length; i++) {
								var datas = {
									goods_thumb: '',
									gid: 0
								};
								datas.goods_thumb = app.goodsList[i].goods_thumb;
								datas.gid = app.goodsList[0].id;
								app.rotation.push(datas);
							}
						}

					} else {

						layer.msg(res.data,{icon:7});

					}

				});

			},

			//跳转
			classGood:function(val){
				$.post("/home/index/getShopGoods",{'_token':'{{csrf_token()}}',id:val},function (res) {
					if(res.code == 1){
						app.goodsList = res.data;
					} else if(res.code == 0) {
						layer.msg(res.data,{icon:7});
					}

				});

			}
			,
			classGood1:function(val){
				$.post("/home/index/classify",{'_token':'{{csrf_token()}}',class:'find',cid:val},function (res) {
					if(res.code == 1){
						app.goodsList = res.data.data;
						app.page = res.data.last_page;
						app.nowPage = res.data.current_page;
						app.val = val;
					} else if(res.code == 0) {
						layer.msg(res.data,{icon:7});
					}

				});
				window.location.href="http://hb.baoliy168.com/shop/index/case"
			}
			,
			jump:function (id) {

				window.location.href="/home/excellent/product?id="+id+"&aa="+1;
				// window.location.href="/home/microShop/index"
			},
			jump1:function () {

				//window.location.href="/home/excellent/product?id="+id;
				window.location.href="/home/microShop/index"
			},

			//获取url id

			obtain:function (val) {

				var query = window.location.search.substring(1);

				var vars = query.split("&");

				for (var i=0;i<vars.length;i++) {

					var pair = vars[i].split("=");

					if(pair[0] == val){

						return pair[1];

					}

				}

			},

		},

		//自动执行

		mounted: function () {

			this.initialize();
			this.classify1();

		},

	})

	//添加滚动事件
	window.onload = function () {
		window.addEventListener('scroll', app.handleScroll)
		const height = window.innerHeight-100;
		$('.page-left').css('height',height+'px');
		$('.page-right').css('height',height+'px');
	}
	//滚动条到底部的距离
	function getScrollBottomHeight() {
		return getPageHeight() - getScrollTop() - getWindowHeight();

	}
	//页面高度
	function getPageHeight() {
		return document.querySelector("html").scrollHeight
	}
	//滚动条顶 高度
	function getScrollTop() {
		var scrollTop = 0,
				bodyScrollTop = 0,
				documentScrollTop = 0;
		if (document.body) {
			bodyScrollTop = document.body.scrollTop;
		}
		if (document.documentElement) {
			documentScrollTop = document.documentElement.scrollTop;
		}
		scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
		return scrollTop;
	}

	function getWindowHeight() {
		var windowHeight = 0;
		if (document.compatMode == "CSS1Compat") {
			windowHeight = document.documentElement.clientHeight;
		} else {
			windowHeight = document.body.clientHeight;
		}
		return windowHeight;
	}

</script>

</html>

